<%@ page import="com.cdvtc.flower.model.Products" %>
<%@ page import="com.cdvtc.flower.dao.ProductsDao" %>
<%@ page import="com.cdvtc.flower.dao.impl.ProductsDaoImpl" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2024/5/21
  Time: 14:46
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>花漾</title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- CSS
	============================================ -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="tool/assets/css/vendor/bootstrap.min.css">

    <!-- Icon Font CSS -->
    <link rel="stylesheet" href="tool/assets/css/vendor/ionicons.min.css">

    <!-- Plugins CSS -->
    <link rel="stylesheet" href="tool/assets/css/plugins/slick.css">
    <link rel="stylesheet" href="tool/assets/css/plugins/animation.css">
    <link rel="stylesheet" href="tool/assets/css/plugins/jqueryui.min.css">

    <!-- Vendor & Plugins CSS (Please remove the comment from below vendor.min.css & plugins.min.css for better website load performance and remove css files from avobe) -->
    <!--
    <script src="tool/assets/js/vendor/vendor.min.js"></script>
    <script src="tool/assets/js/plugins/plugins.min.js"></script>
    -->

    <!-- Main Style CSS (Please use minify version for better website load performance) -->
    <link rel="stylesheet" href="tool/assets/css/style.css">
    <!--<link rel="stylesheet" href="tool/assets/css/style.min.css">-->

</head>

<body>

<div class="main-wrapper">

    <header class="fl-header">

        <!-- Header Top Start 图标-->
        <div class="header-top-area d-none d-lg-block">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="header-top-inner">
                            <div class="row">
                                <div class="col-lg-4 col-md-3">
                                    <div class="social-top">
                                        <ul>
                                            <li><a href="#"><i class="ion-social-facebook"></i></a></li>
                                            <li><a href="#"><i class="ion-social-twitter"></i></a></li>
                                            <li><a href="#"><i class="ion-social-tumblr"></i></a></li>
                                            <li><a href="#"><i class="ion-social-googleplus"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-lg-8 col-md-9">
                                    <div class="top-info-wrap text-right">
                                        <ul class="top-info">
                                            <li>周一 - 周五 : 9am to 5pm</li>
                                            <li><a href="#">+19108069904</a></li>
                                            <li><a href="#">花卉电商@gmail.com</a></li>
                                            <c:if test="${not empty sessionScope.customer}">
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                                                       aria-expanded="false">${sessionScope.customer.user_name}<span class="caret"></span></a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="log-out">退出</a></li>
                                                        <li><a href="orders.jsp">订单</a> </li>
                                                    </ul>
                                                </li>
                                            </c:if>
                                            <c:if test="${empty sessionScope.customer}">
                                                <li><a href="login.jsp">登录</a></li>
                                            </c:if>
                                            <li><a href="register.jsp">注册</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Header Top End -->

        <!-- haeader bottom Start 导航栏-->
        <div class="haeader-bottom-area">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-2 col-md-4 col-5">
                        <div class="logo-area">
                            <a href="index.jsp"><img src="tool/assets/images/logo/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col-lg-8 d-none d-lg-block">
                        <div class="main-menu-area text-center">
                            <!--  Start Mainmenu Nav-->
                            <nav class="main-navigation">
                                <ul>
                                    <li><a href="index.jsp"> 首页 </a></li>
                                    <li><a href="shop.jsp"> 商品列表 </a>
                                </ul>
                            </nav>

                        </div>
                    </div>

                    <div class="col-lg-2 col-md-8 col-7">
                        <jsp:include page="commons/navbar.jsp"></jsp:include>
                    </div>
                </div>
            </div>
        </div>
        <!-- haeader bottom End -->

        <!-- main-search start -->
        <div class="main-search-active">
            <div class="sidebar-search-icon">
                <button class="search-close"><span class="ion-android-close"></span></button>
            </div>
            <div class="sidebar-search-input">
                <form>
                    <div class="form-search">
                        <input id="search" class="input-text" value="" placeholder="Search entire store here ..."
                               type="search">
                        <button class="search-btn" type="button">
                            <i class="ion-ios-search"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <!-- main-search start -->


        <!-- off-canvas menu start -->
        <aside class="off-canvas-wrapper">
            <div class="off-canvas-overlay"></div>
            <div class="off-canvas-inner-content">
                <div class="btn-close-off-canvas">
                    <i class="ion-android-close"></i>
                </div>

                <div class="off-canvas-inner">

                    <!-- mobile menu start -->
                    <div class="mobile-navigation">

                        <!-- mobile menu navigation start -->
                        <nav>
                            <ul class="mobile-menu">
                                <li><a href="index.jsp">首页</a></li>
                                <li><a href="shop.jsp">商品列表</a>
                                <li><a href="product-details.jsp">商品详情</a></li>
                            </ul>
                        </nav>
                        <!-- mobile menu navigation end -->
                    </div>
                    <!-- mobile menu end -->


                    <!-- offcanvas widget area start -->
                    <div class="offcanvas-widget-area">
                        <div class="off-canvas-contact-widget">
                            <ul>
                                <li>
                                    Mon - Fri : 9am to 5pm
                                </li>
                                <li>
                                    <a href="#">0123456789</a>
                                </li>
                                <li>
                                    <a href="#">info@yourdomain.com</a>
                                </li>
                            </ul>
                        </div>
                        <div class="off-canvas-social-widget">
                            <a href="#"><i class="ion-social-facebook"></i></a>
                            <a href="#"><i class="ion-social-twitter"></i></a>
                            <a href="#"><i class="ion-social-tumblr"></i></a>
                            <a href="#"><i class="ion-social-googleplus"></i></a>
                        </div>

                    </div>
                    <!-- offcanvas widget area end -->
                </div>
            </div>
        </aside>
        <!-- off-canvas menu end -->

    </header>


    <!-- Hero Section Start 轮播图-->
    <div class="hero-slider hero-slider-one">

        <!-- Single Slide Start -->
        <div class="single-slide" style="background-image: url(tool/assets/images/slider/slide-bg-1.jpg)">
            <!-- Hero Content One Start -->
            <div class="hero-content-one container">
                <div class="row">
                    <div class="col-lg-10 col-md-10">
                        <div class="slider-text-info">
                            <!--                                修改3 -->
                            <h2>花 <span>漾</span></h2>
                            <h1>花店有约， <span>心香一瓣， </span>为您绽放</h1>
                            <p>风有约，花不误，年年岁岁不相负</p>
                            <div class="hero-btn">
                                <a href="#" class="slider-btn uppercase"><span>SHOP NOW</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Hero Content One End -->
        </div>
        <!-- Single Slide End -->


        <!-- Single Slide Start -->
        <div class="single-slide" style="background-image: url(tool/assets/images/slider/slide-bg-2.jpg)">
            <!-- Hero Content One Start -->
            <div class="hero-content-one container">
                <div class="row">
                    <div class="col-lg-10 col-md-10">
                        <div class="slider-text-info">
                            <h2>花 <span>漾</span></h2>
                            <h1>花店有约， <span>心香一瓣， </span>为您绽放</h1>
                            <p>为你花开满城，为你明灯三千</p>
                            <div class="hero-btn">
                                <a href="#" class="slider-btn uppercase"><span>SHOP NOW</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Hero Content One End -->
        </div>
        <!-- Single Slide End -->


        <!-- Single Slide Start -->
        <div class="single-slide" style="background-image: url(tool/assets/images/slider/slide-bg-3.jpg)">
            <!-- Hero Content One Start -->
            <div class="hero-content-one container">
                <div class="row">
                    <div class="col-lg-10 col-md-10">
                        <div class="slider-text-info">
                            <h2>花 <span>漾</span></h2>
                            <h1>花店有约， <span>心香一瓣， </span>为您绽放</h1>
                            <p>春有约，花不误，朝朝暮暮等重逢</p>
                            <div class="hero-btn">
                                <a href="#" class="slider-btn uppercase"><span>SHOP NOW</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Hero Content One End -->
        </div>
        <!-- Single Slide End -->


    </div>
    <!-- Hero Section End -->

    <!-- Start Product Area 特色商品-->
    <div class="porduct-area section-pt section-pb-60">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">

                    <div class="section-title text-center">
                        <h2><span>特色</span> 商品</h2>
                        <p>生活随心，花香漫城</p>
                    </div>

                </div>
            </div>

            <%--            源代码头--%>
            <div class="row product-active-lg-4">

                <%
                    ProductsDao productsDao = new ProductsDaoImpl();
                    List<Products> products;
                    products = productsDao.getProductsOnSale();
                    pageContext.setAttribute("products", products);
                %>
                <c:forEach var="product" items="${products}">
                    <div class="col-lg-3">
                        <!-- single-product-wrap start -->
                        <div class="single-product-wrap">
                            <div class="product-image">
                                <a href="product-details.jsp?id=${product.product_id}"><img src="tool/assets/images/product/${product.image}"
                                                                    alt="Produce Images"></a>
                                <c:choose>
                                    <c:when test="${product.sale_price != 0}">
                                        <!-- 使用fmt:formatNumber标签来格式化数字 -->
                                        <span class="label">
                                             <fmt:formatNumber
                                                     value="${(1-(product.sale_price/product.original_price))*100}"
                                                     type="percent" pattern="#"/>% 优惠
                                        </span>
                                    </c:when>
                                    <c:otherwise>
                                        <span class="label">无法计算折扣，因为sale_price为0。</span>
                                    </c:otherwise>
                                </c:choose>
                                    <%-- value：这个属性指定了要格式化的数字。在你的例子中，它使用了 EL 表达式 ${product.original_price / product.sale_price} 来计算原始价格与促销价格之间的比值。
                                        type：这个属性定义了数字的类型。在你的例子中，它被设置为 "number"，表示要格式化的数字是一个普通的数字（不是货币、百分比等）。
                                        pattern：这个属性定义了数字的显示格式。在你的例子中，pattern 被设置为 "#.##"。这个模式的意义如下：
                                        #：表示数字的非零部分（包括整数部分和小数部分的非零位）。
                                        .：表示小数点。
                                        ##：表示小数部分，其中 # 是可选的。这意味着如果小数部分有数字，它们将被显示；如果没有，则不显示小数部分（即不显示小数点后的零）。
                                    因此，#.## 这个模式会保留两位小数，但如果原始数字的小数部分没有两位（例如是整数或只有一位小数），则不会显示多余的零。--%>

                                    <%--                                <span class="label">${(product.original_price / product.sale_price):.2f</span>--%>
                                <div class="product-action">
                                    <form action="AddToCartServlet" method="post">
                                        <!-- 隐藏字段，用于传递产品ID或其他唯一标识符 -->
                                        <input type="hidden" name="productId" value="${product.product_id}" />
                                        <button type="submit" class="add-to-cart">
                                            <i class="ion-bag"></i>
                                        </button>
                                    </form>
                                    <form action="AddToLoveServlet" method="post">
                                        <!-- 隐藏字段，用于传递产品ID或其他唯一标识符 -->
                                        <input type="hidden" name="productId" value="${product.product_id}" />
                                        <button type="submit" class="wishlist">
                                            <i class="ion-android-favorite-outline"></i>
                                        </button>
                                    </form>
<%--                                    <a href="#" class="wishlist"><i class="ion-android-favorite-outline"></i></a>--%>
<%--                                    <a href="#" class="quick-view" data-toggle="modal" data-target="#exampleModalCenter"><i class="ion-ios-search"></i></a>--%>
                                </div>
                            </div>
                            <div class="product-content">

                                <h3><a href="product-details.jsp">${product.product_name}</a></h3>
                                <div class="price-box">
                                    <span class="old-price">${product.original_price}</span>
                                    <span class="new-price">${product.sale_price}</span>
                                </div>
                            </div>
                        </div>
                        <!-- single-product-wrap end -->
                    </div>
                </c:forEach>

            </div>

        </div>
    </div>
</div>
<!-- Start Product End -->

<!-- Banner Area Start 分栏专区-->
<div class="banner-area section-pb">
    <div class="container-fluid">
        <div class="row">

            <div class="col-lg-4 col-md-6">
                <!-- Single Banner Start-->
                <div class="single-banner mt-30">
                    <img src="tool/assets/images/banner/banner-01.jpg" alt="">
                    <div class="banner-content text-center">
                        <div class="banner-content-box">
                            <h4>送亲人</h4>
                            <p>鲜花传情，让爱回家，给亲人最真挚的祝福。</p>
                            <a href="shop.jsp">Shop now</a>
                        </div>
                    </div>
                </div>
                <!-- Single Banner End -->
            </div>

            <div class="col-lg-4 col-md-6">
                <!-- Single Banner Start -->
                <div class="single-banner mt-30">
                    <img src="tool/assets/images/banner/banner-02.jpg" alt="">
                    <div class="banner-content text-center">
                        <div class="banner-content-box">
                            <h4>送恋人</h4>
                            <p>鲜花赠佳人，爱意永相随，让浪漫瞬间定格成永恒。</p>
                            <a href="shop.jsp">Shop now</a>
                        </div>
                    </div>
                </div>
                <!-- Single Banner End -->
            </div>

            <div class="col-lg-4 col-md-6">
                <!-- Single Banner Start -->
                <div class="single-banner mt-30">
                    <img src="tool/assets/images/banner/banner-03.jpg" alt="">
                    <div class="banner-content text-center">
                        <div class="banner-content-box">
                            <h4>送友人</h4>
                            <p>友情如花香，沁人心脾，送一束鲜花，让友情更加芬芳。</p>
                            <a href="shop.jsp">Shop now</a>
                        </div>
                    </div>
                </div>
                <!-- Single Banner End -->
            </div>

        </div>
    </div>
</div>
<!-- Banner Area End -->

<!-- Start Product Area 所有商品 -->
<div class="product-area section-pb">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">

                <div class="section-title text-center">
                    <h2><span>所有</span> 商品</h2>
                    <p>生活明朗，鲜花可爱。</p>
                </div>
            </div>
        </div>

        <div class="row product-two-row-4">

            <c:forEach var="product" items="${products}">

                <div class="col-lg-12">
                    <!-- single-product-wrap start -->
                    <div class="single-product-wrap">
                        <div class="product-image">
                            <a href="product-details.jsp?id=${product.product_id}"><img src="tool/assets/images/product/${product.image}"
                                                                alt="Produce Images"></a>
                            <c:choose>
                                <c:when test="${product.sale_price != 0}">
                                    <!-- 使用fmt:formatNumber标签来格式化数字 -->
                                    <span class="label">享
                <fmt:formatNumber value="${(1-(product.sale_price/product.original_price))*100}" type="percent"
                                  pattern="#"/>% 优惠
            </span>
                                </c:when>
                                <c:otherwise>
                                    <span class="label">无法计算折扣，因为sale_price为0。</span>
                                </c:otherwise>
                            </c:choose>
                            <div class="product-action">
                                <form action="AddToCartServlet" method="post">
                                    <!-- 隐藏字段，用于传递产品ID或其他唯一标识符 -->
                                    <input type="hidden" name="productId" value="${product.product_id}" />
                                    <button type="submit" class="add-to-cart">
                                        <i class="ion-bag"></i>
                                    </button>
                                </form>
                                <form action="AddToLoveServlet" method="post">
                                    <!-- 隐藏字段，用于传递产品ID或其他唯一标识符 -->
                                    <input type="hidden" name="productId" value="${product.product_id}" />
                                    <button type="submit" class="wishlist">
                                        <i class="ion-android-favorite-outline"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.jsp">${product.product_name}</a></h3>
                            <div class="price-box">
                                <span class="old-price">${product.original_price}</span>
                                <span class="new-price">${product.sale_price}</span>
                            </div>
                        </div>
                    </div>
                    <!-- single-product-wrap end -->
                </div>
            </c:forEach>

        </div>
    </div>
</div>
<!-- Start Product End -->


<!-- testimonial-area start -->
<div class="testimonial-area testimonial-bg bg-gray overly-image section-ptb">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 offset-md-2 col-md-8 col-sm-12">
                <div class="testimonial-slider">
                    <div class="testimonial-inner text-center">
                        <div class="test-cont">
                            <img src="tool/assets/images/icon/quite.png" alt="">
                            <p>花出，花开，花盛，花枯，花落，有始就有终</p>
                        </div>
                        <div class="test-author">
                            <h5>JONATHON JORDAN</h5>
                        </div>
                    </div>
                    <div class="testimonial-inner text-center">
                        <div class="test-cont">
                            <img src="tool/assets/images/icon/quite.png" alt="">
                            <p>人的花期都不一样 有时候错过就不开了.</p>
                        </div>
                        <div class="test-author">
                            <h5>Michelle Mitchell</h5>
                        </div>
                    </div>
                    <div class="testimonial-inner text-center">
                        <div class="test-cont">
                            <img src="tool/assets/images/icon/quite.png" alt="">
                            <p>这朵世间最好的玫瑰，星辰为泥，银河滋养。永远不会枯萎，永远在沉静宇宙中盛放.</p>
                        </div>
                        <div class="test-author">
                            <h5>Max Mitchell</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- testimonial-area end -->

<footer>
    <div class="footer-top section-pb section-pt-60">
        <div class="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="copy-right-text text-center">
                            <p>Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>


</div>

<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script src="tool/assets/js/vendor/modernizr-3.6.0.min.js"></script>
<!-- jQuery JS -->
<script src="tool/assets/js/vendor/jquery-3.3.1.min.js"></script>
<!-- Bootstrap JS -->
<script src="tool/assets/js/vendor/popper.min.js"></script>
<script src="tool/assets/js/vendor/bootstrap.min.js"></script>

<!-- Slick Slider JS -->
<script src="tool/assets/js/plugins/slick.min.js"></script>
<!-- Jquery ui JS -->
<script src="tool/assets/js/plugins/jqueryui.min.js"></script>
<!-- Scrollup JS -->
<script src="tool/assets/js/plugins/scrollup.min.js"></script>
<script src="tool/assets/js/plugins/ajax-contact.js"></script>

<!-- Main JS -->
<script src="tool/assets/js/main.js"></script>

</body>

</html>

